<script setup lang="ts">
import {
  useMessage,
  NButton,
  NSpace,
  NDataTable,
  NInput,
  type DataTableColumns,
  NPagination
} from 'naive-ui'
import { onActivated, reactive, ref, watch, onDeactivated } from 'vue'
import { sendRequest } from '@/utils/api'
import type { processStatisticsModel } from '@/api/processStatistics'
import type { HttpResponsePagination } from '@/utils/http'
import TableView from '@/components/TableView.vue'
import { useRoute } from 'vue-router'
import router from '@/router'

const message = useMessage()
const route = useRoute()
const tableLoading = ref(false)
const tableData = ref<processStatisticsModel[]>([])
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    queryTableData()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    queryTableData()
  }
})
const form = reactive({ processName: null })
const columns: DataTableColumns<processStatisticsModel> = [
  {
    title: '序号',
    key: 'orderIndex',
    render: (_, i) => {
      return ++i + (paginationReactive.page - 1) * paginationReactive.pageSize
    },
    width: 80,
    align: 'center'
  },
  {
    title: '流程名称',
    key: 'processName',
    width: 200,
    align: 'center'
  },
  {
    title: '审批中数量',
    key: 'approvalCount',
    align: 'center'
  },
  {
    title: '审批通过数量',
    key: 'passCount',
    align: 'center'
  },
  {
    title: '审批拒绝数量',
    key: 'rejectCount',
    align: 'center'
  },
  {
    title: '审批撤回数量',
    key: 'revokeCount',
    align: 'center'
  },
  {
    title: '流程总数量',
    key: 'count',
    align: 'center'
  },
  {
    title: '流程完结率(%)',
    key: 'endRate',
    align: 'center'
  },
  {
    title: '流程平均时间(天)',
    key: 'avgDay',
    align: 'center'
  }
]

const queryTableData = async (resetPage = false) => {
  if (resetPage) paginationReactive.page = 1
  tableLoading.value = true
  const [error, res] = await sendRequest<HttpResponsePagination<processStatisticsModel>>({
    module: 'processStatistics',
    api: 'list',
    override: {
      params: {
        processName: form.processName,
        page: paginationReactive.page,
        limit: paginationReactive.pageSize
      }
    }
  })
  tableLoading.value = false
  if (error) return message.error(error.message)
  paginationReactive.itemCount = res.data.totalCount
  tableData.value = res.data.list
}
const GoList = () => router.push('/oA/processStatistics/processStatistics')
const GoColumnar = () => router.push('/oA/processStatistics/columnar')
const GoPie = () => router.push('/oA/processStatistics/pie')

onActivated(() => {
  if (window.flags.flushRole) {
    queryTableData()
    window.flags.flushRole = false
  }
})

const keyUpDown = (e: any) => e.key == 'Enter' && (paginationReactive.page = 1,queryTableData())
onDeactivated(() => window.removeEventListener('keyup', keyUpDown, false))

watch(
  () => route,
  () => {
    if (route.path == '/OA/ProcessStatistics/processStatistics') {
      queryTableData()
      window.addEventListener('keyup', keyUpDown, false)  // 回车
    }
  },
  { deep: true, immediate: true }
)
</script>

<template>
  <TableView class="role">
    <template #form>
      <NSpace justify="space-between">
        <NSpace>
          <NInput placeholder="请输入流程名称" style="width: 294rem" clearable filterable v-model:value="form.processName" />
          <NButton style="width: 78rem" color="#6CB187" ghost @click="queryTableData(true)" :disabled="tableLoading"
            :loading="tableLoading">
            查询
          </NButton>
        </NSpace>
        <NSpace>
          <img class="img" @click="GoList" src="@/assets/images/list.png" />
          <img class="img" @click="GoColumnar" src="@/assets/images/columnar.png" />
          <img class="img" @click="GoPie" src="@/assets/images/pie.png" />
        </NSpace>
      </NSpace>
    </template>

    <template #table="props">
      <n-data-table v-bind="props" :data="tableData" :columns="columns" :loading="tableLoading" :bordered="false"
        :pagination="false" />
    </template>

    <template #pagination>
      <NPagination :page-sizes="paginationReactive.pageSizes" :item-count="paginationReactive.itemCount"
        :page="paginationReactive.page" :page-size="paginationReactive.pageSize"
        @update:page="paginationReactive.onChange" @update:page-size="paginationReactive.onUpdatePageSize"
        show-size-picker show-quick-jumper :suffix="() => '页'">
        <template #prefix>
          <span style="font-size: 14px;"> 共{{ paginationReactive.itemCount }}条</span>
        </template>
      </NPagination>
    </template>
  </TableView>
</template>

<style lang="scss" scoped>
.role {
  padding: 29rem 30rem 42rem;
}

.img {
  width: 30px;
  height: 30px;
  cursor: pointer;
}
</style>
